<template>
  <h1 class="text-center text-3xl font-bold underline">Hello world!</h1>
  <nav class="text-center font-bold">navbar</nav>
  <hr />

  <main class="text-center">
    <form action="">
      <label for="">
        username
        <input
          type="text"
          v-model="username"
          :class="` ${inputStyle} ${username_class} `"
        />
      </label>

      <br />

      <label for="">
        password
        <input
          type="text"
          v-model="password"
          :class="` ${inputStyle} ${password_class} `"
        />
      </label>
    </form>
  </main>
</template>

<script setup>
import { ref, watch } from "vue";
const username = ref("");
const password = ref("");

const inputStyle = "borer-solid mt-4 border-2  rounded";

const username_class = ref("border-black");
const password_class = ref("border-black");

watch(
  [username, password],
  ([currentUsername, currentPassword], [prevUsername, prevPassword]) => {
    // username_class.value = password_class.value = "border-black";
    if (currentUsername.length >= 4) {
      username_class.value = "border-black";
    }

    if (currentPassword.length >= 4) {
      password_class.value = "border-black";
    }
    if (
      currentUsername.length !== prevUsername.length &&
      currentUsername.length < 4
    ) {
      username_class.value = "border-red-500";
    }
    if (
      currentPassword.length !== prevPassword.length &&
      currentPassword.length < 4
    ) {
      password_class.value = "border-red-500";
    }
  }
);
</script>
